<template>
  <div id="main" class="listBox" :style="{height:height,width:width}"></div>
  <div style="position: absolute;top: 20px;right: 20px;">
    <el-date-picker v-model="year" type="year" placeholder="请选择年份" value-format="YYYY" @change="handleQuery" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
// require('echarts/theme/macarons') // echarts theme
import 'echarts/theme/macarons'
import resize from './mixins/resize'
import { getGeneralLedgerList } from '@/api/dashboard/Stacked';

let chart = null
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: 'auto'
    }
  },
  data() {
    return {
      communityName:[],
      houseCost:[],
      houseWasteCost:[],
      bicycleCost:[],
      garageCost:[],
      totalCost:[],
      year:'',
      totalCostsize:[]
    }
  },
  mounted() {
    this.$nextTick(async() => {
      this.getGeneralLedger()
    })
  },
  beforeUnmount() {
    if (!chart) {
      return
    }
    chart.dispose()
    chart = null
  },
  methods: {
    async getGeneralLedger() {
      let res = await getGeneralLedgerList({currentDate:''})
      res.data.forEach(item => {
        let key = [Object.keys(item)]
        this.communityName.push(key)
        this.houseCost.push(item[key][0]*1)
        this.houseWasteCost.push(item[key][1]*1)
        this.bicycleCost.push(item[key][2]*1)
        this.garageCost.push(item[key][3]*1)
        this.totalCost.push(((item[key][0]*1)+(item[key][1]*1)+(item[key][2]*1)+(item[key][3]*1)).toFixed(2))
        this.totalCostsize.push(0)
      })
      this.initChart()
    },
    async handleQuery() {
      let yearText = this.year==null?'':this.year + '-01-01'
      this.communityName = []
      this.houseCost = []
      this.houseWasteCost = []
      this.bicycleCost = []
      this.garageCost = []
      this.totalCost = []
      this.totalCostsize = []
      let res = await getGeneralLedgerList({currentDate:yearText})
      res.data.forEach(item => {
        let key = [Object.keys(item)]
        this.communityName.push(key)
        this.houseCost.push(item[key][0]*1)
        this.houseWasteCost.push(item[key][1]*1)
        this.bicycleCost.push(item[key][2]*1)
        this.garageCost.push(item[key][3]*1)
        this.totalCost.push(((item[key][0]*1)+(item[key][1]*1)+(item[key][2]*1)+(item[key][3]*1)).toFixed(2))
        this.totalCostsize.push(0)
      })
      chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        // legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: this.communityName
        },
        title:{
          text:'合计费用',
          textStyle:{
            color: '#404357',
            fontSize: '20px',
            fontWeight: 'bold',
          }
        },
        legend: {},
        series: [
          {
            name: '房屋物业费(住宅/商铺)',
            type: 'bar',
            stack: 'total',
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: 'series'
            },
            data:this.houseCost
          },
          {
            name: '装修垃圾清运费',
            type: 'bar',
            stack: 'total',
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: 'series'
            },
            data: this.houseWasteCost
          },
          {
            name: '车库物业费',
            type: 'bar',
            stack: 'total',
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: 'series'
            },
            data:this.bicycleCost
          },
          {
            name: '车位管理费用',
            type: 'bar',
            stack: 'total',
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: 'series'
            },
            data:this.garageCost
          },{
            name: '总计',
              type: 'line',
              lineStyle: {
                  opacity: 0,
            },
            symbolSize:0,
              label: {
                  show: true,
                  position: 'right'
              },
            data: this.totalCost
          }
        ],
        color:['#5470c6','#91cc75','#fac858','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc'],
        gradientColor:['#f6efa6','#d88273','#bf444c']
      })
    },
    initChart() {
      var chartDom = document.getElementById('main');
      chart = echarts.init(chartDom)

      chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        // legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: this.communityName
        },
        title:{
          text:'合计费用',
          textStyle:{
            color: '#404357',
            fontSize: '20px',
            fontWeight: 'bold',
          }
        },
        legend: {},
        series: [
          {
            name: '房屋物业费(住宅/商铺)',
            type: 'bar',
            stack: 'total',
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: 'series'
            },
            data:this.houseCost
          },
          {
            name: '装修垃圾清运费',
            type: 'bar',
            stack: 'total',
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: 'series'
            },
            data: this.houseWasteCost
          },
          {
            name: '车库物业费',
            type: 'bar',
            stack: 'total',
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: 'series'
            },
            data:this.bicycleCost
          },
          {
            name: '车位管理费用',
            type: 'bar',
            stack: 'total',
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: 'series'
            },
            data:this.garageCost
          },{
            name: '总计',
            type: 'line',
            lineStyle: {
              opacity: 0,
            },
            symbolSize:0,
              label: {
                  show: true,
                  position: 'right'
              },
            data: this.totalCost
          }
        ],
        color:['#5470c6','#91cc75','#fac858','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc'],
        gradientColor:['#f6efa6','#d88273','#bf444c']
      })
    }
  }
}
</script>
<style>
.listBox {
  width: 100%;
  min-height: 480px;
  height: auto;
}
</style>
